<template>
  <view class="picker_box">
    <uni-popup
      ref="popupRef"
      :is-mask-click="false"
      :animation="true"
      type="bottom"
    >
      <view
        class="popup_box"
        :style="{
          'margin-bottom': '15px',
          height: showLocalLogo ? 577 + 'rpx' : 457 + 'rpx',
        }"
      >
        <view class="header_title">
          {{ title }}
        </view>
        <view class="content">
          <!-- 选择方式 -->
          <view v-if="!showLocalLogo" class="list">
            <view
              v-for="(i, idx) in methods"
              :key="idx"
              :class="[activeType === i.type ? 'active' : '', 'item']"
              @click="chooseMethod(i)"
            >
              {{ i.name }}
            </view>
          </view>
          <!-- 选择图片 -->
          <view v-if="showLocalLogo" class="all_logo">
            <view
              class="logo"
              v-for="(i, idx) in localLogo"
              :key="idx"
              @click="chooseLocalLogo(i)"
            >
              <image :src="i.file" mode="" class="logo_image"></image>
              <image
                :src="
                  activeLogo === i.index
                    ? 'https://xuexiaole-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaoleClient/checked_icon.png'
                    : 'https://xuexiaole-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaoleClient/unchecked_icon.png'
                "
                mode=""
                class="radio"
              ></image>
            </view>
          </view>
        </view>

        <view class="operation">
          <button class="cancel_btn" @tap="tapCancelBtn">取消</button>
          <button class="confirm_btn" @tap="tapConfirmBtn">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { computed, nextTick, reactive, ref, watch } from "vue";
// import { useCommonStore } from "@/store";
const props = defineProps({
  title: {
    type: String,
    default: "选择奖励 LOGO",
  },
});
const emits = defineEmits(["update:modelValue", "confirm"]);
// const commonStore = useCommonStore();
const showLocalLogo = ref(false);
const activeType = ref(1);
const activeLogo = ref(); // 选中本地logo

const methods = reactive([
  {
    name: "选择小程序提供LOGO",
    type: 1,
  },
  {
    name: "从手机相册选择",
    type: 2,
  },
]);
const localLogo = ref([
  {
    file: "http://chatbox-1313840333.cos.ap-guangzhou.myqcloud.com/2024/06/21/6dab916d5825460ba13a8a9e76cbf6cf.png",
    index: 1,
  },
  {
    file: "http://chatbox-1313840333.cos.ap-guangzhou.myqcloud.com/2024/06/21/847e27f3f6bd48d3806cb4e3f07b5aa4.png",
    index: 2,
  },
  {
    file: "http://chatbox-1313840333.cos.ap-guangzhou.myqcloud.com/2024/06/21/6cd3cc6e0bbc41f0885937ea5c0f54fb.png",
    index: 3,
  },
  {
    file: "http://chatbox-1313840333.cos.ap-guangzhou.myqcloud.com/2024/06/21/427b30bfa35c4b389af6bbc15652f000.png",
    index: 4,
  },
  {
    file: "http://chatbox-1313840333.cos.ap-guangzhou.myqcloud.com/2024/06/21/4fcb50ada25449cc814dd2a6c2c86dc4.png",
    index: 5,
  },
  {
    file: "http://chatbox-1313840333.cos.ap-guangzhou.myqcloud.com/2024/06/21/cc2917b48193495d9768aee9887f3631.png",
    index: 6,
  },
]);

const popupRef = ref(null);
// const bottomHeight = computed(() => {
//   return `-${commonStore.systemInfo.safeAreaInsets.bottom}px`;
// });

// 打开弹窗
function open() {
  activeType.value = 1;
  activeLogo.value = "";
  showLocalLogo.value = false;
  popupRef.value.open();
}

// 取消
function tapCancelBtn() {
  if (showLocalLogo.value) {
    activeLogo.value = "";
    showLocalLogo.value = false;
  } else {
    popupRef.value.close();
  }
}
// 确定
function tapConfirmBtn() {
  showLocalLogo.value = activeType.value === 1;
  if (activeType.value === 1 && activeLogo.value) {
    // 本地LOGO
    let logoFile = localLogo.value.find(
      (item) => item.index === activeLogo.value
    );
    if (logoFile) emits("confirm", logoFile.file, activeType.value);
    popupRef.value.close();
  } else if (activeType.value === 2) {
    // 本地相册
    uni.chooseImage({
      count: 1, //最多可以选择的图片张数
      sizeType: ["compressed", "original"], //original 原图，compressed 压缩图，默认二者都有
      sourceType: ["album"], //album 从相册选图，camera 使用相机，默认二者都有
      success: (res) => {
        uni.getImageInfo({
          src: res.tempFilePaths[0],
          success: (imageInfo) => {
            const { width, height } = imageInfo;
            if (width !== height) {
              uni.showToast({
                title: "LOGO比例1:1",
                icon: "none",
              });
              return;
            }
            const isSize = res.tempFiles.find((item) => {
              return item.size > 1024 * 1024 * 10;
            });
            if (isSize) {
              uni.showToast({
                title: "图片大小不能超过10M",
                icon: "none",
              });
              return;
            }
            const file = res.tempFilePaths[0];
            emits("confirm", file, activeType.value);
            popupRef.value.close();
          },
          fail: () => {
            uni.showToast({
              title: "获取图片信息失败",
              icon: "none",
            });
            return;
          },
        });
      },
      fail: (err) => {
        //图片接口调用失败的回调函数
        console.log("chooseImage fail", err);
      },
    });
  }
}

function chooseMethod(val) {
  activeType.value = val.type;
}
// 选择本地logo
function chooseLocalLogo(val) {
  activeLogo.value = val.index;
}
defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.picker_box {
  .popup_box {
    position: relative;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;

    .header_title {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      z-index: 99;
      color: #333;
      font-size: 32rpx;
    }

    .content {
      padding: 75rpx 0 0 0;

      .list {
        font-size: 32rpx;
        color: #333;
        text-align: center;

        .item {
          padding: 30rpx;
          line-height: 45rpx;

          &:first-child {
            border-bottom: 1px solid #eee;
          }
        }

        .active {
          color: #615dff;
        }
      }

      .all_logo {
        display: flex;
        flex-wrap: wrap;
        padding: 30rpx 100rpx 0 100rpx;
        box-sizing: border-box;

        .logo {
          position: relative;
          margin: 0 30rpx 30rpx 30rpx;
          width: 120rpx;
          height: 120rpx;

          &_image {
            width: 100%;
            height: 100%;
          }

          .radio {
            position: absolute;
            top: -8rpx;
            right: -8rpx;
            width: 30rpx;
            height: 30rpx;
            background-color: #fff;
            border-radius: 50%;
          }
        }
      }
    }

    .operation {
      display: flex;
      position: fixed;
      width: 100%;
      padding-top: 16rpx;
      border-top: 1px solid #eeeeee;
      bottom: 60rpx;

      button::after {
        border: none;
      }

      .cancel_btn {
        width: 230rpx;
        height: 90rpx;
        color: #615dff;
        background-color: #ececff;
      }

      .confirm_btn {
        margin-left: 20rpx;
        height: 90rpx;
        width: 440rpx;
        color: #fff;
        background-color: #615dff;
      }
    }
  }
}
</style>
